<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .red {
            background-color: red;
        }

        .white {
            background-color: beige;
        }
    </style>
</head>
<body>
<input type="button" value="增加页" onclick="adddiv()">

<div id="titles">
</div>
<div id="table">

</div>

</body>
<script src="js/jquery/jquery-1.12.2.min.js"></script>
<script type="application/javascript">
    function adddiv() {
        debugger
        var l = $("#titles").find("button").length;
        var titles = $("#titles");
        var $table = $("#table");
        titles.append(
                $("<button type='button' >").addClass("white").prop("id", "title" + l).attr("index", l).append($div[l])
        );
        $table.append($("<div>").prop("id", "body" + l).append("第" + $div[l] + "页内容"))
        $("#title" + l).click(
                function () {
                    clickdiv(this)
                }
        ).click();

    }
    function clickdiv(e) {
        var $this = $(e);
        var index = $this.attr("index");
        $this.removeClass("red").addClass("white").siblings().removeClass("white").addClass("red");
        $("#body" + index).show().siblings().hide();
    }
    var $div = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
</script>
</html>